<template>
	<view>
		<image :src="banner" mode="aspectFill" class="banner"></image>
		<view class="return" @click="toReturn()">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<view class="main">
			<view class="search">
				<u-search bgColor="RGBA(255, 255, 255, 0.7)" @change="toSearch()" placeholder="输入搜索内容"
					:showAction="false" v-model="keyword"></u-search>
			</view>
			<!-- 	<div class="category">
				<view class="active">分类1</view>
				<view>分类2</view>
				<view>分类3</view>
				<view>分类4</view>
				<view>分类5</view>
			</div> -->
			<view hover-class="none" :url="'/pages/scenic/detail/detail?id='+item.id" class="list flex align"
				v-for="(item,index) in list" :key="index">
				<!-- <image class="cover" :src="item.cover" mode="aspectFill"></image> -->
				<view class="info">
					<view class="title">{{item.name}}</view>
					<view class="tabs flex align">
						<view v-for="(item2,index) in item.tags" :key="index">{{item2}}</view>
					</view>
					<view class="address">
						<view class="ponit flex align" v-if="item.telephone!=''">
							<u-icon name="phone-fill"></u-icon>
							<view class="view">{{item.telephone}}</view>
						</view>
						<view class="ponit flex align" v-if="item.open_time!=''">
							<u-icon name="clock-fill"></u-icon>
							<view class="view">{{item.open_time}}</view>
						</view>
						<view class="ponit flex" mode="widthFix">
							<u-icon name="map-fill"></u-icon>
							<view class="view">{{item.address}}</view>
						</view>
					</view>
				</view>
				<view class="status" @click="toCall(item.telephone)">
					<u-icon name="phone-fill" color="#00AF91" size="30"></u-icon>
				</view>
			</view>
			<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
		</view>
		<!-- 返回顶部按钮 -->
		<view class="back-to-top" v-if="showBack" @click="handleTop">
			<image src="/static/top.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		serviceList,
		positionDetail
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				keyword: '',
				currentIndex: 0,
				categoryList: [],
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				category_id: 1,
				banner: '',
				longitude: '',
				latitude: '',
				showBack: false,
				ws: null,
				path: '/pages/service/service'
			};
		},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
			// 监听页面滚动事件
			if (e.scrollTop >= 100) {
				this.showBack = true; // 滚动距离超过100px时显示返回顶部按钮
			} else {
				this.showBack = false; // 否则隐藏返回顶部按钮
			}
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		onLoad() {
			this.getlist()
			this.getBanner()
		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		mounted() {

		},
		onShareAppMessage(){
			
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				uni.connectSocket({
					url: wsUrl,
					success: function(res) {
						console.log('WebSocket连接成功');
						that.sendData({
							type: 'page_enter',
							path: that.path,
							params: ""
						});
					},
					fail: function(err) {
						console.error('WebSocket连接失败', err);
					}
				});
			},
			// 发送
			sendData(data) {
				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: function(res) {
						console.log('消息发送成功');
					},
					fail: function(err) {
						console.error('消息发送失败', err);
					}
				});
			},
			handleTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面顶部
					duration: 300 // 滚动动画持续时间，单位为毫秒
				});
			},
			toCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			toReturn() {
				uni.navigateBack()
			},
			toSearch() {
				this.page = 0
				this.list = []
				this.getlist()
			},
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(La3 / 2), 2) +
							Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
						)
					)
				s = s * 6378.137
				s = Math.round(s * 10000) / 10000
				s = s.toFixed(2)
				return s
			},
			async getBanner() {
				const result = await positionDetail({
					position_id: 13
				})
				if (result.code == 1) {
					this.banner = result.data.path
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					keyword
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					name: keyword
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await serviceList(obj);
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						that.totalPage = Math.ceil(result.data.total / offset);
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 100%;
		position: fixed;
		top: 0;
		height: 500rpx;
	}

	.main {
		background: #F6F7FB;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		position: relative;
		padding: 30rpx;
		top: 326rpx;

		.search {
			box-shadow: 1rpx 2rpx 10rpx 1rpx gainsboro;
			border-radius: 50rpx;
		}

		.category {
			white-space: nowrap;
			overflow-x: auto;
			margin: 30rpx 0;
			padding: 5rpx 0;

			view {
				display: inline-block;
				width: 196rpx;
				line-height: 56rpx;
				background: white;
				font-size: 28rpx;
				color: '#333333';
				text-align: center;
				margin-right: 12rpx;
				border-radius: 56rpx;
				box-shadow: 1rpx 2rpx 15rpx 2rpx gainsboro;
			}

			.active {
				background: #00AF91;
				color: white;
			}
		}

		.list {
			background: white;
			border-radius: 16rpx;
			padding: 12rpx;
			margin: 30rpx 0;
			position: relative;

			.cover {
				width: 184rpx;
				height: 220rpx;
				border-radius: 16rpx;
			}

			.info {
				margin-left: 12rpx;
				width: 88%;

				.title {
					font-size: 32rpx;
					// color: #00AF91;
				}

				.tabs {
					margin: 20rpx 0 10rpx;

					view {
						background: #DAF5EF;
						border-radius: 8rpx;
						color: #00AF91;
						font-size: 24rpx;
						padding: 0 12rpx;
						margin-right: 12rpx;
					}
				}

				.address {
					.ponit {
						color: #6C7A94;
						font-size: 24rpx;
						margin-bottom: 10rpx;

						image {
							width: 24rpx;
							height: 30rpx;
							margin-right: 4rpx;
						}

						view {
							margin-right: 6rpx;
						}

						.view {
							width: 90%;
						}
					}

				}
			}

			.add-btn {
				background: linear-gradient(to right, #12D5B4, #08C1A1, #00AF91);
				color: white;
				width: 160rpx;
				line-height: 56rpx;
				border-radius: 32rpx;
				text-align: center;
				position: absolute;
				right: 0;
				bottom: 12rpx;
			}

			.status {
				color: #E5404F;
				font-size: 32rpx;
			}
		}
	}
</style>